<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-card
        v-for="item in newslist"
        :key="item.id"
        :title="item.title"
        :thumb="item.img_url"
        @click="toNewsDetail(item.id)"
      >
        <div slot="price">
          <div>发表时间：{{ item.add_time | formatDate }}</div>
        </div>
        <div slot="num">
          <div>{{ '点击' + item.click }}</div>
        </div>
      </van-card>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 新闻列表数据
      newslist: [],
      isLoading: false
    }
  },
  created() {
    this.getNewsList()
  },
  methods: {
    // 获取新闻列表
    async getNewsList() {
      const { data: res } = await this.$http.get('/api/getnewslist')
      if (res.status !== 0) {
        return this.$toast('服务器异常!')
      }
      this.newslist = res.message
    },
    // 下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.$toast('刷新成功')
        this.isLoading = false
      }, 700)
    },
    // 新闻详情页
    toNewsDetail(id) {
      this.$router.push('/news/detail/' + id)
    }
  }
}
</script>

<style lang="less" scoped>
.van-card:not(:first-child) {
  margin-top: 0;
}
.van-card {
  background: #fff;
  border-bottom: 1px solid #eee;
  margin: 0 10px;
  padding: 10px;
  .van-card__thumb {
    width: 42px;
    height: 42px;
    .van-image {
      width: 100%;
      height: 100%;
    }
  }
  .van-card__content {
    min-height: 0;
    .van-card__title {
      font-size: 14px;
      font-weight: 700;
      color: #000;
      height: 17px;
    }
    .van-card__bottom {
      .van-card__price {
        color: #226aff;
        line-height: 30px;
      }
      .van-card__num {
        color: #226aff;
        line-height: 30px;
      }
    }
  }
}
</style>
